<template>
	<div id='main'>
		<div class='left'>
			<div id='pieChart'>
				饼状图
			</div>
			<div id='histogram'>
				柱状图
			</div>
		</div>
		<div class='right'>
			<div class='head'>
				<div class='box second'>
					<div class='hot secondValue'>热度值</div>
				</div>
				<div class='box first'>
					<div class='kueen'></div>
					<div class='hot firstValue'>热度值</div>
					<div class='rankingContent'>
						<div class='rank'></div>
						<div class='value'>{{rankingData}}</div>
					</div>
				</div>
				<div class='box three'>
				<div class='hot threeValue'>热度值</div>
				</div>
			</div>
			<div class='main'>
				<div></div>
			</div>
		</div>
	</div>
</template>
<script>
	//引入
	import showOptions from './ShowOptions'
	export default {
		data() {
			return {
				provinceId: this.$route.params.provinceId,
				//热度榜单
				rankingData:null,
				//需要默认展示图表信息
				showOptions: null
			}
		},
		created() {
			console.log(this.provinceId)
			this.showOptions = showOptions;
			this.rankingData=showoptions.rankingData;
		},
		mounted() {
			this.echarsInit();
		},
		methods: {
			echarsInit() {
				//图表
				var firstChart = this.$echarts.init(document.getElementById('pieChart'));
				var secondChart = this.$echarts.init(document.getElementById('histogram'));
				// 使用刚指定的配置项和数据显示图表。
				firstChart.setOption(this.showOptions.echartsList[0]);
				secondChart.setOption(this.showOptions.echartsList[1]);
			},
		},
	}
</script>

<style lang="less" scoped>
	#main {
		width: 100%;
		height: 100%;
		display: flex;
		color: white;

		.left {
			display: flex;
			width: 50%;
			margin:5px 18px;
			
			flex-direction: column;
			justify-content:center;
			#pieChart {
				dispaly: flex;
				width:380px;
				height:200px;
				// color: white;
				// background: black;
			}
			#histogram {
				display: flex;
				width:500px;
				height:400px;
				// color: white;
				// background: palevioletred;
			}
		}
		.right {
			display: flex;
			width: 50%;
			flex-direction: column;
			padding: 0 20px;
			.head {
				display: flex;
				// 三个盒子的公共属性
				.box{
					display:flex;
					background: rgba(12,12,12,0.1);
					border-radius: 10px 10px 0 0;
					flex-direction: column;
					align-items: center;
					height:110px;
				}
				//热度值的公共属性
				.hot{
					display:flex;
					width:38%;
					height:25px;
					border-radius:20px;
					line-height:25px;
					justify-content:center;
				}
				.first {
					flex-grow: 1;
					display:flex;
					height: 141px;
					// box-shadow:0 0 1px red inset;
					//专属皇冠
					.kueen {
						display: flex;
						width: 30px;
						height: 30px;
						background: url('../../assets/img/皇冠.png') no-repeat;
						opacity: 0.9;
						background-size: cover;
					}
					//firstHotValue
					.firstValue{
						background:rgba(224,188,60,0.2);
						color:rgba(207,181,106,0.9);
					}
					.rankingContent{
						display:flex;
						.rank{
							color:white;
							font-weight:600;
						}
						.value{
							
						}
					}
				}
				.second {
					margin-top: 18px;
					padding-top:14px;
					flex-grow: 1;
					height: 110px;
					border-radius: 10px 10px 0 10px;
					.secondValue{
						background:rgba(247,166,102,0.2);
						color:rgba(247,166,102,0.9);
					}
				}
				.three {
					margin-top: 18px;
					padding-top:14px;
					flex-grow: 1;
					height: 110px;
					.threeValue{
					background:rgba(0,120,215,0.2);
					color:rgba(0,120,215,0.7);	
					}
				}
			}
			//排名的内容呢
			.main {
				display: flex;
				flex-direction: column;
			}

		}

	}
</style>
